<template>
  <div>
    <!-- 头部搜索 -->
    <div class="dskt_nav_bar">
      <div class="bar_span bar_left">
        <img @click="searchEnterEvent" :src="'./static/img/icon_search.png'">
      </div>
      <div class="bar_center">
        <input
          type="text"
          class="base_input"
          v-model="searchData.searchKey"
          @keyup.enter="searchEnterEvent"
          placeholder="姓名、学号、考核单号"
        >
      </div>
    </div>
    <flexbox v-if="isShowWait" :gutter="0" class="shensu_title">
      <flexbox-item :span="5/8" class="shensu_title_span">共<span class="span_num">{{dataNum}}</span>条待处理申诉</flexbox-item>
      <flexbox-item   class="shensu_title_button" @click.native="doChangeView(false)">
            已处理申诉<icon type="enter"/>
      </flexbox-item>
    </flexbox>
    <flexbox v-if="!isShowWait" :gutter="0" class="shensu_title">
      <flexbox-item :span="5/8" class="shensu_title_span">查询到<span class="span_num">{{dataNum}}</span>条已审核记录</flexbox-item>
      <flexbox-item   class="shensu_title_button" @click.native="doChangeView(true)">
            待审核<icon type="enter"/>
      </flexbox-item>
    </flexbox>
    <!-- 滚动数据div -->
    <div class="scrollerWrap">
      <scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller">
            <div
              v-for="(order,index) in dataList"
            :key="index"
              class="green-box kaidan_box vux-1px-t click_to_green"
              @click="toEdit(order.appealId,order.id)"
            >
              <div class="kaidan_box_top">
                <flexbox :gutter="0">
                  <flexbox-item :span="7/10" class="user_group_div">
                       <div class="user_name">{{order.studentName}}</div>
                      <div class="user_address"><span>{{order.studentNo}}</span>&nbsp;&nbsp;<span>{{order.showAddress}}</span></div>
                  </flexbox-item>
                  <flexbox-item :span="3/10" align="right">
                    <p class="status">{{ order.statusText }}</p>
                    <p class="time">{{ order.showTimeStr}}</p>
                  </flexbox-item>
                </flexbox>
              </div>
              <ul class="kaidan_buttom click_to_green">
                <li class="right_li">
                  <span
                    class="border_radus"
                    :class="[order.scoringType==1 ? 'color_green' : 'color_red']"
                  >{{ order.scoringType==1 ? '+'+order.points : '-' +order.points }}分</span>
                  {{order.checkBigCateName}}-{{order.checkItemName}}  <span
                class="zuoqinag_span"
              >{{order.appropriateExplain}}</span>
                </li>
              </ul>
            </div>
      </scroller>
    </div>
    <!-- 选择原因 -->
  </div>
</template>

<script>
import appealApplyService from "../../shared/service/appealApplyService";
import baseService from "../../shared/service/baseService";
import weixinService from "../../shared/service/weixinService";
const wx = require('weixin-js-sdk')
import { Swipeout, SwipeoutItem, SwipeoutButton, dateFormat } from "vux";
export default {
  components: {
    Swipeout,
    SwipeoutItem,
    SwipeoutButton,
    dateFormat,
  },
  data() {
    var data = {
      dataNum: 0,
      loginUserId: this.$cookie.getUserId(),
      showRightMenu: false,
      selectKdStatus: "",
      selectKdTimeType: "",
      dataList: [],
      searchData: {
        searchKey: "",
        startTime: "",
        endime: ""
      },
      isShowWait:true,
    };

    data.dataPage = {
      pageNum: 0,
      pages: 0
    };

    return data;
  },
  mounted() {
    //页面滚动给顶部的搜索栏添加一个样式
    $(".view-router").on("scroll", function() {
      if ($(this).scrollTop() >= 100) {
        $(".dskt_nav_bar").addClass("bar_sroll");
      } else {
        $(".dskt_nav_bar").removeClass("bar_sroll");
      }
    });
    this.doSearchData(1);
     weixinService.initWx(wx);
  },
  methods: {
    //搜索事件
    searchEnterEvent(type) {
      this.doSearchData(1);
    },
    doChangeView(isShowWait){
        this.isShowWait=isShowWait;
        this.doSearchData(1);
    },
    //列表-编辑 , 开单按钮
    toEdit(appealApplyId,checkOrderId) {
       this.$router.push({ name: "appeal_apply_detail", query: { viewType: "teacher" ,appealApplyId: appealApplyId ,checkOrderId: checkOrderId } });
    },
    handleEvents(type) {
      console.log("event: ", type);
    },
    doSearchData(page, fn) {
      var param = {
        searchKey: this.searchData.searchKey
      };
      if(this.isShowWait){
        param.state=1;
        param.openOrderUserId=this.$cookie.getUserId();
      }else{
        param.authUserId = this.$cookie.getUserId();
      }

      appealApplyService.getTeacherAppealOrderPage(page, param).then(res => {
        var data = res.data;
        this.dataPage.pageNum = page;
        this.dataPage.pages = data.pages;
        this.dataNum = data.total;
        for (let i = 0; i < data.list.length; i++) {
          let po = data.list[i];
          po = this.dealData(po);
        }
        if (page == 1) {
          this.dataList = data.list;
        } else {
          this.dataList = this.dataList.concat(data.list);
        }
        if (fn) fn();
      }).catch(res => {
        console.log(res);
      });
    },
    dealData(po) {
      switch(po.appealAuthState){
              case 0:
                  po.statusText= "撤诉";
                  break;
              case 1:
                  po.statusText= "待审核";
                  break;
              case 2:
                  po.statusText= "审核通过";
                  break;
              case 3:
                  po.statusText= "驳回";
                  break;
      }
      po.showAddress = this.$commonUtil.getUserAddress(po);
      po.showTimeStr = dateFormat(this.$commonUtil.getDate(po.appealCreTime), "YY/MM/DD HH:mm");
      return po;
    },
    //下拉刷新
    refresh(done) {
      this.doSearchData(1, done);
    },
    //下拉刷新
    infinite(done) {
      if (
        this.dataPage.pages > 0 &&
        this.dataPage.pages <= this.dataPage.pageNum
      ) {
        this.$refs.myscroller.finishInfinite(true);
        return;
      }
      if (this.dataPage.pages == 0) {
        this.$refs.myscroller.finishInfinite(true);
        return;
      }
      this.doSearchData(this.dataPage.pageNum + 1, done);
    }
  }
};
</script>
<style scoped>
@import "../../assets/scss/home.scss";
</style>
<style scoped>
.right_li {
  padding-top: 8px;
  font-size: 14px;
}

.user_group_div {
  font-size: 16px;
  color: #111;
  border-right: 1px soild #f4f4f4;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.user_name{
  font-size: 18px;
}
.time{
    color:#B8B8B8 !important;
}
.user_group_div  .user_class,.user_group_div .user_address{
  padding-top:8px;
    font-size:14px;
    color:#B8B8B8;
}

.bar_sroll {
  border-bottom: 1px solid #e3e3e3;
}
.view-router {
  padding-top: 43px;
}
.right_menu_div {
  width: 280px;
  background: white;
  height: 100%;
}
.menu_buttom_group {
  position: absolute;
  bottom: 20px;
  padding: 0 15px;
  box-sizing: border-box;
}
.scrollerWrap {
  position: absolute;
  width: 100%;
  top: 85px;
  bottom: 51px;
}
</style>
